<template>
  <Modal
      :title="modalProps.title"
      :show="modalProps.show"
      @ok="handleOk"
      @cancel="handleCancel"
  >
    <ModalForm ref="form"></ModalForm>
  </Modal>
</template>

<script lang="ts">
export default {
  name: "ColorModal"
}
</script>

<script setup lang="ts">
import {nextTick, onMounted, reactive, ref} from "vue"
import {ColorSaveType, ColorUpdate} from '@/view/shopping/product/productType'
import Modal from '@/components/Modal.vue'
import ModalForm from '@/components/ModalForm.vue'
import {FormModalType} from '@/type/ModalFormType'
import {useRoute} from 'vue-router'
import {sms_product_color_save, sms_product_color_update} from '@/api/sms'
import useMsg from '@/hooks/useMsg'

const {success, error} = useMsg()

const emit = defineEmits<{
  (e: 'list'):void
}>()
const route = useRoute()
const form = ref<FormModalType<ColorSaveType>>()
const modalProps = reactive<{
  title: string
  show: boolean
  type: 0|1
}>({
  title: "",
  show: false,
  type: 0
})

const formModal = reactive<ColorUpdate>({
  product_id: "",
  product_color_count: 0,
  product_color_name: "",
  product_color_pic: "",
  id: 0
})

function init (data?:ColorUpdate) {
  if (data) {
    modalProps.type = 1
    modalProps.title = "修改商品颜色"
    let key: keyof ColorUpdate
    for (key in formModal) {
      formModal[key] = data[key]
    }
  }else{
    modalProps.type = 0
    modalProps.title = "添加商品颜色"
  }
  modalProps.show = true
  nextTick(() => {
    form.value?.init([
      {
        type: "hidden",
        key: 'product_id',
        label: "商品id",
        value: route.query.product_id as string,
      },
      {
        type: "input",
        key: "product_color_name",
        label: "颜色名称",
        value: data?.product_color_name,
        rules: [
          {
            required: true,
            message: "请输入颜色名称",
            trigger: "change"
          }
        ]
      },
      {
        type: "number",
        key: "product_color_count",
        label: "商品库存",
        value: data?.product_color_count || 0,
        rules: [
          {
            type: "number",
            required: true,
            message: "请输入当前颜色商品库存",
            trigger: "change"
          }
        ]
      },
      {
        type: "upload",
        key: "product_color_pic",
        label: "商品图片",
        url: "ums/product/pic",
        value: data?.product_color_pic,
        rules: [
          {
            required: true,
            message: "请删除当前商品颜色图片",
            trigger: "change"
          }
        ]
      }
    ])
  })
}


const handleOk = () => {
  form.value?.validate().then(data => {
    if (modalProps.type === 0) {
      sms_product_color_save(data).then(res => {
        if (res.code === 200) {
          success(res.message)
          emit("list")
          modalProps.show = false
        }else {
          error(res.message)
        }
      })
    }
    if (modalProps.type === 1) {
      sms_product_color_update({
        ...formModal,
        ...data,
      }).then(res => {
        if (res.code === 200) {
          success(res.message)
          emit("list")
          modalProps.show = false
        }else {
          error(res.message)
        }
      })
    }
  })
}

const handleCancel = () => {
  modalProps.show = false
}

defineExpose({
  init
})

onMounted( () => {
} )
</script>

<style scoped lang="scss">

</style>
